<template>
  <div class="yx-bg">
    <div id="top-panel" style="height: 13rem;">
      <div style="float: left;">
        <img style="width: 4rem; margin-top: 2rem; margin-left: 2rem;" src="/static/img/home.png" @click="returnHome">
        <div style="margin-left: 2rem; color: #FE7F7E;">返回首页</div>
      </div>
      <img id="meihua" style="width: 60%; float: right; margin-right: -15%;" src="/static/img/meihua.png">
    </div>

    <!-- <div style="width: 100%; text-align: center; font-size: 3.5rem; font-weight: bold; color: red; margin-top: -3.5rem;">个人首答</div> -->

    <div style="font-size: 2.2rem; text-align: center;">当前答对题目数量：<span style="font-size: 2.5rem; font-weight: bold; color: red;">{{userAnswerCorrectNum}}</span></div>

    <div style="width: 90%; margin: 2rem auto; background-color: #ffffff; border-radius: 1rem; padding: 2rem 1rem; font-size: 2rem; height: 65%; overflow-y: scroll;">
      <div style="font-size: 2.5rem; text-align: center; color: #2194E6;">首次答对题目列表</div>
      <ol>
        <li v-for="item in firstBloodQuestions" style="font-size: 2.2rem;">
          {{item.question}}【{{item.id}}】
        </li>
      </ol>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      firstBloodQuestions: [],
      userAnswerCorrectNum: 0,
    }
  },
  mounted: function() {
    TweenLite.from("#meihua", 1, {
      x: "+400",
      opacity: 0,
    })

    this.getFirstBloodQuestions()
    this.userAnswerCorrectNum = parseInt(localStorage.getItem('answer_correct_num'))
  },
  methods: {
    returnHome: function() {
      this.$router.push({path: 'cover'})
    },

    getFirstBloodQuestions: function() {
      let openid = localStorage.getItem('openid')
      let that = this
      this.$axios.get(`/getYuanXiaoFirstBloodQuestion.php?openid=${openid}`)
        .then(res => {
          console.log(res.data)
          that.firstBloodQuestions = res.data
        })
    }

  },


}
</script>
